<template>
  <div>
    <el-collapse>
      <el-collapse-item title="条件搜索" style="margin-left: 16px">

        <el-form :inline="true" :model="videoForm" label-width="90px" size="mini">
          <el-form-item label="数据时间">
            <el-date-picker
              v-model="videoForm.dataTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="账号名称">
            <el-select v-model="videoForm.account" placeholder="请选择" @change="getAccount">
              <el-option
                v-for="item in accountName"
                :key="item.openId"
                :label="item.nickname"
                :value="item.openId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="标签">
            <el-select v-model="videoForm.ban" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="分组">
            <el-select v-model="videoForm.douyin" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="运营人">
            <el-select v-model="videoForm.baiying" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否私密">
            <el-select v-model="videoForm.tag" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="是否有商品">
            <el-select v-model="videoForm.tag" placeholder="请选择活动区域">
              <el-option label="全部" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!--<el-button type="primary" style="margin: 0 15px 7px 0;float:left;" size="small"
                   @click="clean">清空
        </el-button>-->
      </el-collapse-item>
    </el-collapse>

    <el-card shadow="always" style="margin-top: 10px">
      <el-row>
        <el-col :span="12">
          <el-button type="primary" style="margin: 0 15px 7px 0;float:left;" icon="el-icon-plus" size="small"
                     @click="auth">抖音号
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-tooltip class="item" effect="dark" content="更新频率为30min/次" placement="top-start">
            <i class="el-icon-question" style="float:right;color: #97a8be">更新说明</i>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="always" style="margin-top: 10px">
      <el-row style="margin: 0 0 11px 50px">
        <el-col class="col" :span="span">累计播放量</el-col>
        <el-col class="col" :span="span">点赞数</el-col>
        <el-col class="col" :span="span">评论数</el-col>
        <el-col class="col" :span="span">分享数</el-col>
        <el-col class="col" :span="span">转发数</el-col>
      </el-row>
      <el-row style="margin: 0 0 11px 50px">
        <el-col class="col" :span="span">{{this.countData.play}}</el-col>
        <el-col class="col" :span="span">{{this.countData.digg}}</el-col>
        <el-col class="col" :span="span">{{this.countData.comment}}</el-col>
        <el-col class="col" :span="span">{{this.countData.share}}</el-col>
        <el-col class="col" :span="span">{{this.countData.forward}}</el-col>
      </el-row>
    </el-card>

    <el-card shadow="always" style="margin-top: 10px">
      <!--<el-button type="primary" style="margin: 0 15px 7px 0;float:left;" icon="el-icon-plus" size="small"
                 @click="videoList">获取列表
      </el-button>-->
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="360"
        fit border>
        </el-table-column>
        <el-table-column
          label="序号"
          align="center"
          width="50"
          type="index">
        </el-table-column>
        <el-table-column
          prop="title"
          label="视频名称"
          width="550">
          <template slot-scope="scope">
            <el-row>
              <el-col :span="7">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.cover"
                  fit="cover"></el-image>
              </el-col>
              <el-col :span="17">
                <el-row>
                  <el-col style="text-overflow:ellipsis">
                    <el-link :underline="false" @click="seeVideo(scope.row.shareUrl)" target="_blank">
                      {{scope.row.title}}
                    </el-link>
                  </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                  <el-col :span="4">
                    <el-image
                      style="width: 50px; height: 50px"
                      :src="scope.row.avatar"
                      fit="cover"></el-image>
                  </el-col>
                  <el-col :span="7" style="margin-top: 10px">
                    <el-link :underline="false" target="_blank" @click="handlerOrderAccount(scope.row)">
                      {{scope.row.nickname}}
                    </el-link>
                  </el-col>
                  <!--<el-col :span="6">
                    <el-button type="text" icon="el-icon-s-promotion"></el-button>
                  </el-col>-->
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column
          label="发布时间"
          align="center"
          width="150">
          <template slot-scope="scope">
            {{scope.row.videoCreateTime | formatDate}}
          </template>
        </el-table-column>
        <!--<el-table-column
          prop="province"
          label="视频时长"
          align="center"
          width="139">-->
        </el-table-column>
        <el-table-column
          prop="commentCount"
          label="评论数"
          align="center"
          width="130">
        </el-table-column>
        <el-table-column
          prop="diggCount"
          label="点赞数"
          align="center"
          width="130">
        </el-table-column>
        <el-table-column
          prop="playCount"
          label="累积播放量"
          align="center"
          width="130">
        </el-table-column>
        <el-table-column
          prop="shareCount"
          label="分享数"
          align="center"
          width="130">
        </el-table-column>
        <el-table-column
          prop="forwardCount"
          label="转发数"
          align="center"
          width="130">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!--<div style="text-align:center">
        <el-button type="primary" icon="el-icon-arrow-left" @click="prev" :disabled="isDisabled">上一页</el-button>
        <el-button type="primary" icon="el-icon-arrow-right" @click="next">下一页</el-button>
      </div>-->
    </el-card>
  </div>
</template>

<script>
  import {douyinOauth, getDouyinList} from "@/api/work/douyinOuath";
  import {videoList, getVideoList, getVideoNum} from "@/api/work/video/video";
  import ElRow from "element-ui/packages/row/src/row";
  import ElCol from "element-ui/packages/col/src/col";
  export default{
    components: {
      ElCol,
      ElRow
    },
    filters: {
      formatDate: function (value) {
        var unixTimestamp = new Date(value * 1000)
        return unixTimestamp.toLocaleString()
      },
      spilt: function (value) {
        return value.slice('0', '-2')
      }
    },
    data()
    {
      return {
        isDisabled: true,
        span: 4,
        currentPage: 0,
        pageSize: 0,
        total: 0,
        countData: {},
        videoForm: {},
        allList: [],
        accountList: [],
        openIdList: [],
        videoListData: [],
        prevPage: [],
        accountName: [{
          nickname: '',
          openId: ''
        }],
        tableData: [{
          statistics: {}
        }],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created(){
      this.getDouyinList();
    },
    methods: {

      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.videoList()
      },
      /*视频列表*/
      videoList(){
        getVideoList(this.currentPage, this.openIdList).then(response => {
          const result = response.data.list
          this.tableData = result
          this.total = response.data.total
          console.log('statisticsResult', this.tableData)
          this.handleAccumulate();
        });
      },
      /*获取抖音账号列表*/
      getDouyinList(){
        getDouyinList().then(response => {
          const result = response.data
          this.accountName = result
          //遍历
          result.forEach((item, index) => {
            this.openIdList.push(item.openId)
          })
          this.videoList();
        })
      },
      /*通过抖音账号获取视频列表*/
      getAccount(val){
        this.currentPage = 0
        this.openIdList = []
        this.openIdList.push(val)
        this.videoList();
      },
      /*授权*/
      auth(){
        douyinOauth().then(response => {
          window.location.href = response.data
        });
      },
      /*观看视频*/
      seeVideo(val){
        window.location.href = val
      },
      handlerOrderAccount(val){
        this.$router.push({
          path: `/account/index`,
          query: {
            id: val.openId
          }
        })
      },
      /*积累*/
      handleAccumulate(){
        getVideoNum(this.openIdList).then(response => {
          console.log('response', response)
          this.countData = response.data
        })
      },
      /*清空条件*/
      /* clean(){
       let obj = {
       openId: val,
       cursor: '0'
       }
       this.objList = []
       this.objList.push(obj)
       this.videoForm = {}
       this.getDouyinList();
       },*/
    }
  }
</script>

<style>

</style>
